// 定义表单搜索初始值
import { SearchFormItem } from '@/service/types/search-form'
import { ElMessage, ElMessageBox, ElTag, FormInstance, FormRules } from 'element-plus'
import { useCheckedColumns } from '@/hooks/useCheckedColumns'
import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
import { UserQuery } from '@/service/UserService'
import { initState } from '@/hooks/utils/storage'

export const searchState = {
    pageNum: 1,
    pageSize: 10,
} as UserQuery
// 响应式表单数据
export const searchData = reactive({ ...searchState })
// 重置表单
export const searchReset = () => {
    Object.assign(searchData, { ...searchState })
}

// 表单配置项
export const searchForm: SearchFormItem[] = [
    {
        label: '用户名',
        prop: 'userName',
        type: 'input'
    },
    {
        label: '昵称',
        prop: 'nickName',
        type: 'input'
    },
    {
        label: '电话',
        prop: 'phonenumber',
        type: 'input'
    },
    {
        label: '状态',
        prop: 'status',
        type: 'input'
    },
    {
        label: '部门',
        prop: 'deptId',
        type: 'input'
    },
    {
        label: '角色',
        prop: 'roleId',
        type: 'input'
    },
    {
        label: '用户列表',
        prop: 'userIds',
        type: 'input'
    }
]

// 列配置
export const tableColumnOptions = [
    { label: '勾选', type: 'selection' },
    { label: '状态', prop: 'status' },
    { label: '创建日期', prop: 'create_time' },
    { label: '操作', prop: 'operation' }
]

export const drawerType = ref('add')
export const drawerVisible = ref(false)
// 表单实例
export const formRef = ref<FormInstance>()
// 表单数据
export const formData = reactive({ ...searchState })
// 显示对话框
export const showDrawer = (type: string, row?: any) => {
    drawerVisible.value = true
    drawerType.value = type

    // 重置表单验证状态
    if (formRef.value) {
        formRef.value.resetFields()
    }
    console.info(row)
    if (type === 'edit' && row) {
        Object.assign(formData, row)
    } else {
        Object.assign(formData, { ...initState })
    }
    console.info(formData)
}

// 删除用户
export const deleteUser = () => {
    ElMessageBox.confirm('确定要注销该用户吗？', '注销用户', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
    }).then(() => {
        ElMessage.success('注销成功')
    })
}

// 动态列配置
export const { columnChecks, columns } = useCheckedColumns(() => [
    { type: 'selection' }, // 勾选列
    {
        label: '用户名',
        prop: 'userName'
    },
    {
        label: '昵称',
        prop: 'nickName'
    },
    {
        label: '电话',
        prop: 'phonenumber'
    },
    {
        label: '部门',
        prop: 'deptName'
    },
    {
        prop: 'operation',
        label: '操作',
        width: 150,
        // fixed: 'right', // 固定在右侧
        // disabled: true,
        formatter: (row: any) => {
            return h('div', [
                h(ArtButtonTable, {
                    type: 'edit',
                    onClick: () => showDrawer('edit', row)
                }),
                h(ArtButtonTable, {
                    type: 'delete',
                    onClick: () => deleteUser()
                })
            ])
        }
    }
])

// 表单验证规则
export const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
    ],
    gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
    role: [{ required: true, message: '请选择角色', trigger: 'change' }]
})

// 提交表单
export const handleSubmit = async () => {
    if (!formRef.value) return

    await formRef.value.validate((valid) => {
        if (valid) {
            ElMessage.success(drawerType.value === 'add' ? '添加成功' : '更新成功')
            drawerVisible.value = false
        }
    })
}
